/**

 * @author ChenJinZhu

 * @date 2023/3/31 15:15

 * @describe :

 */

let canvas = {}, ctx = {};
// const image = new Image();

let offset = 0

const PIPELINE_NUMBER = 15

// 定义管线绘制数组
let pipelinesDrawCollection = []

let iconSelect = {}

const equipmentsIcons = [
    {
        name: '管线',
        eId: 11,
        icon: 'line.png'
    },
    {
        name: '温度表',
        eId: 1,
        icon: 'thermometer.png'
    },
    {
        name: '压力表',
        eId: 2,
        icon: 'manometer.png'
    },
    {
        name: '接头',
        eId: 3,
        icon: 'joint.png'
    },
    {
        name: '直流阀',
        eId: 4,
        icon: 'direct_current_valve.png'
    },
    {
        name: '循环阀',
        eId: 5,
        icon: 'circulating_valve.png'
    },
    {
        name: '电动阀',
        eId: 6,
        icon: 'electric_valve.png'
    },
    {
        name: '开关阀',
        eId: 7,
        icon: 'on_off_valve.png'
    },
    {
        name: '热换机',
        eId: 8,
        icon: 'heat_exchanger.png'
    },
    {
        name: '热换机',
        eId: 9,
        icon: 'heat_exchanger1.png'
    },
    {
        name: '蓄水池',
        eId: 10,
        icon: 'reservoir.png'
    }
]

const drawLine = {
    w : 0,
    h : 0,
    x : 0,
    y : 0,
    draw : function() {
        ctx.fillStyle = "red";
        ctx.globalAlpha = 0.6;
        ctx.fillRect(this.x, this.y, this.w, this.h);
        ctx.globalAlpha = 1;
    }
};

var drawIcon = {
    w : 50,
    h : 50,
    x : 0,
    y : 0,
    src : '',
    draw : function() {
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        var img = new Image();
        img.src = require(`../assets/images/${iconSelect.iconPath}`);
        ctx.drawImage(img, this.x, this.y, this.h, this.w);
        ctx.globalAlpha = 1;
    }
};

const drawAllIcons = () => {
    for (let icons in equipmentsIcons) {
        // console.log(icons)
        // console.log(equipmentsIcons[icons])
        let singleImage = new Image();
        singleImage.src = require(`../assets/images/${equipmentsIcons[icons].icon}`);
        // console.log(singleImage)
        ctx.drawImage(singleImage, Math.floor(Math.random()*500+1), Math.floor(Math.random()*300+1), 50, 50);
    }
}

const canvasDraw = {
    init(element) {
        canvas = document.getElementById(element)
        ctx = canvas.getContext('2d')

        const w = 1200, h = 800;
        canvas.width = w * devicePixelRatio;
        canvas.height = h * devicePixelRatio;
        canvas.style.width = w + 'px';
        canvas.style.height = h + 'px';
        // setTimeout(() => {drawAllIcons()})
        // var mouseX = 0, mouseY = 0
        canvas.onmousedown = (e) => {
            var mouseX = e.pageX - canvas.offsetLeft;
            var mouseY = e.pageY - canvas.offsetTop;
            drawLine.x = mouseX;
            drawLine.y = mouseY;

            canvas.onmousemove = (e) => {
                console.log(e)
                var canvasOffsetH = canvas.offsetTop;
                var canvasOffsetL = canvas.offsetLeft;
                mouseX = e.pageX - canvasOffsetL;
                mouseY = e.pageY - canvasOffsetH;

                // drawLine.w = mouseX - drawLine.x;
                // drawLine.h = mouseY - drawLine.y;
                // if(Math.abs(drawLine.w) > Math.abs(drawLine.h) ){
                //     drawLine.h=8;
                // }else{
                //     drawLine.w=8;
                // }

                drawIcon.x = mouseX;
                drawIcon.y = mouseY;
                drawAll()

            }
        }


        canvas.onmouseup = () => {
            // canvas.onmousedown = null
            canvas.onmousemove = null
            // window.onmousedown = null
            // window.onmousemove = null
        }


        return canvas
    },

    drawTypeChange(ele) {
        console.log(ele)
        iconSelect = ele
        // selectDrawType = ele.drawType
        // if (selectDrawType) currentSelectEquipment = equipmentsIcons.find(item => item.eId === ele.eId)
    }
}

const drawAll = (e) => {
    console.log('a')
    // drawAllIcons()
    // drawLine.draw()
    drawIcon.draw()
    // setTimeout(() => {drawAllIcons()})
    // requestAnimationFrame(drawAll)
    // requestAnimFrame(drawAll)
}


export default canvasDraw
